<template>
  <div class="app-container">
    <div class="info-photo flex-row">
      <!-- 基础信息 -->
      <div class="info">
        <el-carousel class="carousel" height="400px" :autoplay="false">
          <el-carousel-item v-for="(item, index) in infoPhoto.headerResList" :key="index">
            <el-image style="width: 100%; height: 100%" :src="item.url" fit="cover" />
          </el-carousel-item>
        </el-carousel>
        <div class="vr flex-center" @click="toPath(infoPhoto.vrUrl)" v-if="infoPhoto.vrUrl">
          <img class="vr-icon" src="@/assets/images/vr_icon.png" alt="" />
          <span>查看全景</span>
        </div>
        <!-- 基础信息 -->
        <div class="info-describe">
          <div class="flex-between flex-align">
            <div class="name">{{ infoPhoto.showroomName }}</div>
            <el-tag v-if="infoPhoto.examState == 2" type="primary">待上线</el-tag>
            <el-tag v-if="infoPhoto.examState == 3 && infoPhoto.state != 0" type="success">已上线</el-tag>
            <el-tag v-if="infoPhoto.examState == 1" type="warning">待审批</el-tag>
            <template v-if="infoPhoto.examState == 3">
              <el-tag v-if="infoPhoto.state == 0" type="danger">禁用</el-tag>
            </template>
          </div>
          <div class="flex-between flex-align mt10">
            <div class="flex-align">
              <el-text type="info" size="small" style="margin-right: 20px">
                <el-icon><MapLocation /></el-icon>
                {{ infoPhoto.areaName }}{{ infoPhoto.areaDetailed }}{{ infoPhoto.areaSupplement }}
              </el-text>
              <el-text type="info" size="small">
                <el-icon><Timer /></el-icon>
                营业时间：{{ infoPhoto.businessHoursInfo }}
              </el-text>
            </div>
            <div>
              <el-text class="text" size="small"> 上样商品：{{ infoPhoto.sampleNum }}</el-text>
              <el-divider direction="vertical" />
              <el-text class="text" size="small"> 共享商家：{{ infoPhoto.shareMerchantNum }} </el-text>
            </div>
          </div>
          <el-divider class="divider" border-style="double" />
          <div class="flex-align">
            <el-text class="mr32 text" size="small"> 展厅面积：{{ infoPhoto.proportion }}㎡ </el-text>
            <el-text class="text" size="small">
              可展示商品：
              <el-space :size="5" spacer="/">
                <el-text class="text" v-for="i in infoPhoto.categoryList" :key="i.categoryId" size="small">
                  {{ i.categoryName }}{{ i.productNum }}
                </el-text>
              </el-space>
            </el-text>
          </div>
          <div class="remarks">
            <el-tooltip effect="dark" :content="`商品最低折扣说明：${infoPhoto.discount}`" placement="top">
              <el-text class="text" :line-clamp="1">商品最低折扣说明：{{ infoPhoto.discount }}</el-text>
            </el-tooltip>
          </div>
        </div>
      </div>
      <!-- 展厅相册 -->
      <div class="photo flex-column">
        <div class="collection-title">
          <span class="collection-title-circle"></span>
          <div class="collection-title-label">展厅相册</div>
        </div>
        <el-scrollbar class="scrollbar">
          <div class="scrollbar-demo-item" v-for="item in infoPhoto.layoutResList" :key="item.url">
            <el-image :src="item.url" fit="cover" style="width: 100%; height: 100%" :preview-src-list="srcList" />
          </div>
          <div class="scrollbar-demo-item" v-for="item in infoPhoto.albumResList" :key="item.url">
            <el-image :src="item.url" fit="cover" style="width: 100%; height: 100%" :preview-src-list="srcList" />
            <div class="img-name" v-if="item.title">
              <el-text class="img-name-label" :line-clamp="1">{{ item.title }}</el-text>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>

    <!-- 商品分类 -->
    <div class="select-container-box">
      <div class="selection-container">
        <div class="collection-title">
          <div class="collection-title-circle"></div>
          <div class="collection-title-label">上样商品</div>
        </div>
        <div class="content-top">
          <!-- 搜索表单 -->
          <div class="search-wrap">
            <SearchForm :list="[...formList]" @submit="search" @reset="reset"></SearchForm>
          </div>
        </div>
        <div class="content-bottom">
          <!-- 关键词搜索框、编辑多选、更多筛选 -->
          <div class="searchkey-wrap">
            <div class="left">
              <el-input
                class="searchkey-input"
                v-model="postData.form.searchKey"
                @keydown.enter="handelSearch"
                @clear="handelSearch"
                style="width: 320px"
                placeholder="请输入商品名、类目名称搜索"
                clearable
              >
                <template #suffix>
                  <el-icon class="el-input__icon">
                    <Search />
                  </el-icon>
                </template>
              </el-input>
            </div>
            <div class="right">
              <el-button type="primary" link @click="isOpenAttrFilter = true">
                更多筛选
                <el-icon class="ml6">
                  <ArrowRight />
                </el-icon>
              </el-button>
            </div>
          </div>
          <el-container>
            <el-aside :class="{ 'fix-wrap': showSelect }">
              <div>
                <div style="border-radius: 0 0 0 10px">
                  <div class="title f18">商品分类</div>
                  <el-tree
                    ref="treeRef"
                    :default-expand-all="false"
                    :data="treeData"
                    :props="{
                      children: 'children',
                      label: 'name'
                    }"
                    node-key="categoryId"
                    highlight-current
                    @node-click="handleNodeClick"
                  >
                    <template #default="{ node, data }">
                      <span class="custom-tree-node">
                        <span class="custom-tree-node-title">{{ node.label }}</span>
                        <!-- <span class="custom-tree-node-num">
                          (<i style="font-style: normal; font-size: 12px; color: #86909c">已选 {{ data.selectedNum }}</i
                          >/可选 {{ data.notSelectNum }})</span
                        > -->
                      </span>
                    </template>
                  </el-tree>
                </div>
              </div>
            </el-aside>
            <el-main>
              <template v-if="shopList.length > 0">
                <div v-loading="loading" v-for="(item, index) in shopList" :key="index" class="shop-box">
                  <div class="top">
                    <el-image class="img" :src="item.mainPicUrl" fit="cover" :preview-src-list="item.imgList" />
                  </div>

                  <div class="bottom">
                    <div class="header-title">{{ item.productName }}</div>
                    <div class="header-price">
                      <span>
                        工厂价 ¥ <span style="color: red">{{ item.factoryLowestPrice }}</span></span
                      >
                      /
                      <span>
                        销售价 ¥ <span style="color: red">{{ item.businessLowestPrice || "-" }}</span></span
                      >
                    </div>
                    <div class="choose-shop">选购商家：{{ item.selectNum }}</div>
                  </div>
                </div>
              </template>

              <div v-else v-loading="loading" style="display: flex; justify-content: center; width: 100%">
                <el-empty description="暂无数据" />
              </div>
              <div class="pagination" v-if="shopList.length > 0">
                <el-pagination
                  v-model="postData.form.page"
                  :page-size="postData.form.size"
                  :page-sizes="[12, 24, 48, 96]"
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                />
              </div>
            </el-main>
          </el-container>
        </div>
      </div>
    </div>

    <div class="foot-btn">
      <el-button class="btn" type="info" @click="back"> 取消 </el-button>
      <el-button class="btn" v-if="infoPhoto.examState == 1" type="primary" @click="openDialog(1)"> 通过 </el-button>
      <el-button class="btn" v-if="infoPhoto.examState == 2" type="primary" @click="openDialog(2)"> 上线 </el-button>
      <template v-if="infoPhoto.examState == 3">
        <el-button class="btn" v-if="infoPhoto.state == 1" type="primary" @click="openDialog(4)"> 禁用 </el-button>
        <el-button class="btn" v-if="infoPhoto.state == 0" type="primary" @click="openDialog(3)"> 启用 </el-button>
      </template>
      <el-button class="btn" type="primary" @click="openDialog(5)"> 删除 </el-button>
      <el-button class="btn" type="primary" @click="toAddEidt"> 编辑 </el-button>
    </div>

    <!-- 属性筛选 -->
    <attrFilter ref="attrFilterRef" v-model:isOpen="isOpenAttrFilter" :filterData="attrList" @changeAttr="changeAttr" />

    <!-- 统一二次确认-弹窗 -->
    <el-dialog v-model="dialogValue" :close-on-click-modal="false" width="474" align-center title="" @close="closeDialog">
      <div style="text-align: center">
        <el-icon color="#F56C6C" size="70"><Warning /></el-icon>
      </div>
      <div style="text-align: center; margin-top: 40px; margin-bottom: 30px">
        {{ dialogText }}
      </div>
      <template #footer>
        <div style="text-align: center">
          <el-button class="btn" @click="closeDialog">取消</el-button>
          <el-button class="btn" :loading="dialogBtnLoading" type="primary" @click="dialogSure"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  getShowroomDetail,
  examShowroom,
  getCategoryList,
  getSelectPage,
  queryStastsList,
  newGetSelectPage
} from "@/api/showRoomManagement/showRoomDetails";
import SearchForm from "@/components/shopRoomSearchForm";
import { getOptionselect } from "@/api/index";
import attrFilter from "@/components/attrFilter";
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

const infoPhoto = ref({});
const srcList = ref([]);
const getShowroomDetailApi = () => {
  getShowroomDetail({ showroomId: route.query.showroomId }).then(res => {
    infoPhoto.value = res.data;

    let layoutResList = [];
    layoutResList = res.data.layoutResList.map(item => {
      return item.url;
    });
    let albumResList = [];
    albumResList = res.data.albumResList.map(item => {
      return item.url;
    });
    srcList.value = [...layoutResList, ...albumResList];
  });
};

const toPath = url => {
  window.open(url, "_blank");
};

const formList = ref([
  {
    label: "在售价",
    model: "minPrice-maxPrice",
    type: "numrange",
    labelWidth: "70"
  },
  {
    label: "线上同款",
    model: "isOnlineEquivalent",
    type: "select",
    data: [
      { label: "线上有同款", value: 1 },
      { label: "线上无同款", value: 0 }
    ],
    labelWidth: "70"
  },
  {
    label: "是否定制",
    model: "customType",
    type: "select",
    data: [
      { label: "是", value: "1" },
      { label: "否", value: "0" }
    ],
    labelWidth: "70"
  },
  // {
  //   label: "商品风格",
  //   model: "productStyle",
  //   type: "select",
  //   data: [],
  //   labelWidth: "70",
  //   props: {
  //     label: "dictLabel",
  //     value: "dictValue"
  //   }
  // },
  {
    label: "是否模型",
    model: "isModel",
    type: "select",
    data: [
      { label: "是", value: "1" },
      { label: "否", value: "0" }
    ],
    labelWidth: "70"
  },
  {
    label: "运营区域",
    model: "areaId",
    type: "city-select",
    labelWidth: "70",
    props: {
      expandTrigger: "hover",
      value: "cityCode",
      label: "name",
      multiple: true
    }
  },
  {
    label: "市场定位",
    model: "factoryGrade",
    type: "select",
    data: [],
    props: {
      label: "dictLabel",
      value: "dictValue"
    },
    labelWidth: "70"
  }
]);
const total = ref(0);
const postData = reactive({
  form: {
    page: 1,
    size: 10,
    searchKey: ""
  }
});
const treeRef = ref();
const treeData = ref([]);
const shopList = ref([]);
const checkList = ref([]); //选中的商品ids
const loading = ref(false);
const isOpenAttrFilter = ref(false); //是否打开更多筛选抽屉
const attrList = ref([]); //筛选属性列表
const _filterVal = ref([]); //用户选中的筛选属性值
const _filterVal3 = ref([]); //用户选中的3级筛选属性值
const _brandIds = ref([]);
const attrFilterRef = ref();

onMounted(async () => {
  getShowroomDetailApi();
  await newGetSelectPageApi();
  getCodeArr();
  getTree();
  getPageList();
  getAttrFilterList();
});

// 数据字典
const getCodeArr = () => {
  getOptionselect().then(res => {
    // console.log("数据字典获取到了", val);
    formList.value.forEach(item => {
      if (item.model === "productStyle") {
        // 商品风格。下拉数据获取
        item.data =
          res.data.find(el => {
            return el.dictType == "shop_product_style";
          })?.dictDataList || {};
      }
      if (item.model === "factoryGrade") {
        // 市场定位。下拉数据获取
        item.data =
          res.data.find(el => {
            return el.dictType == "shop_product_factory_grade";
          })?.dictDataList || {};
      }
    });
  });
};

//属性筛选id改变时的回调
const changeAttr = ({ filterVal, filterVal3, brandIds }) => {
  console.log("子组件返回的数据===", filterVal, filterVal3, brandIds);
  _filterVal.value = filterVal;
  _filterVal3.value = filterVal3;
  _brandIds.value = brandIds;
  filterDataSubmit(); //属性筛选接口请求
};

/**
 *用户进行属性值勾选，筛选数据
 * @param init 为false时，不重置当前分页； 为true时，重置当前分页为1
 */
const filterDataSubmit = (init = true) => {
  // 属性值筛选数据
  // console.log("属性值筛选数据", _filterVal.value, _filterVal3.value);
  const attrIds2 = _filterVal.value.flat(); //选中的二级属性ids
  for (let ids2 of attrIds2) {
    const str = _filterVal3.value.find(item => typeof item === "string" && item.includes(ids2));
    !str && _filterVal3.value.push(ids2);
  }
  if (init) postData.form.page = 1;
  getPageList();
};

/**
 * 查询可筛选得属性数据
 */
const getAttrFilterList = async form => {
  await queryStastsList({
    searchKey: postData.form.searchKey,
    categoryId: postData.form.categoryId,
    ...form,
    areaId: formData.value.areaId ? Number(formData.value.areaId[formData.value.areaId.length - 1]) : ""
  }).then(res => {
    if (res.code === 200) {
      attrList.value = res.data;
      _filterVal.value = []; //清空属性筛选勾选项
      _filterVal3.value = []; //清空属性筛选勾选项
      attrFilterRef.value && attrFilterRef.value.reset(); //清空抽屉勾选的属性
    }
  });
};

const currNode = ref({});
const handleNodeClick = data => {
  currNode.value = data || {};
  _filterVal.value = []; //清空属性筛选勾选项
  _filterVal3.value = []; //清空属性筛选勾选项
  _brandIds.value = [];
  attrFilterRef.value.reset(); //清空抽屉勾选的属性
  postData.form.categoryId = data ? data.categoryId : "";
  postData.form.page = 1;
  postData.form.size = 12;
  total.value = 0;
  getPageList();
  getAttrFilterList();
};

const getTree = async () => {
  await getCategoryList({ ...postData.form, ...{ productIds: sampleShop.value } }).then(res => {
    treeData.value = res.data || [];
  });
};

const handelSearch = async () => {
  postData.form.page = 1;
  postData.form.size = 12;
  total.value = 0;
  await getPageList();
  reviewCheck();
  getAttrFilterList();
};

const handleCurrentChange = async val => {
  postData.form.page = val;
  await getPageList();
  reviewCheck();
};
const handleSizeChange = async val => {
  postData.form.size = val;
  await getPageList();
  reviewCheck();
};
const reviewCheck = () => {
  const arr = [];
  shopList.value.map(item => {
    if (checkList.value.includes(item.productId)) {
      arr.push(item.productId);
    }
  });
};

// 已上样商品数据
const sampleShop = ref([]);
const newGetSelectPageApi = async () => {
  let queryData = {
    showroomId: route.query.showroomId
  };

  await newGetSelectPage(queryData).then(ret => {
    sampleShop.value = [];
    ret.data?.forEach(item => {
      if (item.productId) {
        sampleShop.value.push(item.productId);
      }
    });
  });
};

const getPageList = async () => {
  loading.value = true;

  let getSelectPageData = {
    ...postData.form,
    ...formData.value,
    stastsIdsStr: _filterVal3.value, //属性筛选ids
    brandIds: _brandIds.value, //品牌id
    areaId: formData.value.areaId ? Number(formData.value.areaId[formData.value.areaId.length - 1]) : "",
    productIds: sampleShop.value
  };

  await getSelectPage(getSelectPageData)
    .then(res => {
      const { data } = res;
      shopList.value = data.records || [];
      // 商品在infoPhoto.value.cpaShowroomProductSampleList里获取对应商品的图片集合
      if (infoPhoto.value.cpaShowroomProductSampleList.length > 0 && shopList.value?.length > 0) {
        shopList.value.forEach(item => {
          item.imgList = [];
          infoPhoto.value.cpaShowroomProductSampleList.map(el => {
            if (item.productId == el.productId) {
              if (el.resourcesList.length > 0 && el.resourcesList) {
                item.imgList = el.resourcesList.map(itemUrl => {
                  return itemUrl.url;
                });
              }
            }
          });
        });
        console.log(shopList.value);
      }
      total.value = data.total;

      // 获取可以加入预选的商品 isSelected == 0
      const arr = [];
      shopList.value.map(item => {
        if (item.isSelected == 0) {
          arr.push(item.productId);
        }
      });

      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};

/**
 * 点击搜索按钮
 */
const formData = ref({});
const search = form => {
  formData.value = JSON.parse(JSON.stringify(form));
  getPageList();
  getAttrFilterList(formData.value);
};

/**
 * 点击重置按钮的回调
 */
const reset = () => {
  console.log("点击重置表单");
  formData.value = {};
  postData.form.page = 1;
  total.value = 0;
  getPageList();
  getAttrFilterList(formData.value);
};

// 弹窗
const dialogValue = ref(false);
const dialogBtnLoading = ref(false);
const dialogText = ref("");
const postStatus = ref(null);
// 打开确认弹窗
const openDialog = type => {
  postStatus.value = type;
  switch (type) {
    case 1:
      dialogText.value = "请确认是否审核通过？";
      break;
    case 2:
      dialogText.value = "请确认是否发布上线？";
      break;
    case 3:
      dialogText.value = "请确认是否启用展厅";
      break;
    case 4:
      dialogText.value = "请确认是否禁用展厅";
      break;
    case 5:
      dialogText.value = "请确认是否删除展厅？";
      break;
    default:
      break;
  }
  dialogValue.value = true;
};
// 关闭确认弹窗
const closeDialog = () => {
  dialogValue.value = false;
};
// 弹窗-确认
const dialogSure = () => {
  examShowroom({ showroomId: infoPhoto.value.showroomId, status: postStatus.value }).then(res => {
    switch (postStatus.value) {
      case 1:
        ElMessage.success("展厅已审核通过");
        break;
      case 2:
        ElMessage.success("展厅已发布上线");
        break;
      case 3:
        ElMessage.success("展厅已启用");
        break;
      case 4:
        ElMessage.success("展厅已禁用");
        break;
      case 5:
        ElMessage.success("展厅已删除");
        break;
      default:
        break;
    }
    closeDialog();

    let postStatusList = [1, 2, 5];
    if (postStatusList.includes(postStatus.value)) {
      back();
      const obj = { path: router.options.history.state.back };
      proxy.$tab.closeOpenPage(obj);
    } else {
      getShowroomDetailApi();
    }
  });
};

const back = () => {
  router.go(-1);
};

const toAddEidt = () => {
  router.push({
    path: "/showRoomManagement/addEdit",
    query: {
      showroomId: infoPhoto.value.showroomId
    }
  });
};
</script>
<style lang="scss" scoped>
// 页面和搜索背景颜色
.page-wrap {
  padding: 0 20px;
  height: calc(100% - 0px);
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  .search-wrap {
    overflow: hidden;
    padding: 20px;
    background-color: #f6f8fa;
    margin-top: 20px;
  }
}

// 标题
.collection-title {
  display: -webkit-flex;
  align-items: center;

  &-circle {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 9px;
    border-radius: 50%;
    background-color: #409eff;
  }

  &-label {
    display: inline-block;
    font-size: 18px;
    color: #131414;
    line-height: 24px;
  }
}
.app-container {
  background: linear-gradient(180deg, #e0eefe, #f6f9ff);
  position: relative;
  padding-bottom: 64px;
  .foot-box {
    display: flex;
    align-items: center;
    flex-flow: row-reverse;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background: #ffffff;
    box-shadow: 0px -5px 10px 0px rgba(66, 78, 102, 0.15);
    border-radius: 0px 0px 10px 0px;
    padding: 0 20px;
    z-index: 2;
    .btn {
      width: 120px;
      height: 36px;
      margin-left: 20px;
    }
  }
}
.info-photo {
  .info {
    flex: 1;
    height: 570px;
    background: #ffffff;
    box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
    border-radius: 10px;
    margin-right: 20px;
    position: relative;
    .carousel {
      border-radius: 10px;
    }
    .vr {
      cursor: pointer;
      position: absolute;
      top: 348px;
      left: 20px;
      width: 110px;
      height: 32px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 4px;
      border: 1px solid #ffffff;
      font-size: 14px;
      color: #3d3d3d;
      .vr-icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }
    }
    .info-describe {
      padding: 20px;
      padding-top: 10px;
      padding-bottom: 0;
      .name {
        font-size: 14px;
        color: #3d3d3d;
        font-weight: bold;
      }
      .divider {
        margin: 13px 0;
        border-color: #eaeef9;
      }
      .text {
        font-size: 12px;
        color: #4e5969;
      }
      .remarks {
        // width: 752px;
        height: 40px;
        line-height: 40px;
        background: #eef1f4;
        border-radius: 0 4px 4px 0;
        border-left: 4px solid #007dff;
        margin-top: 10px;
        padding: 0 20px;
      }
    }
  }
  .photo {
    width: calc(430px - 40px);
    height: calc(610px - 40px);
    background: #ffffff;
    box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
    border-radius: 10px;
    padding: 0 20px;
    padding-top: 25px;
    padding-bottom: 15px;
    .collection-title {
      margin-bottom: 25px;
    }
    .scrollbar {
      flex: 1;
      padding-right: 10px;
      ::v-deep(.el-scrollbar__view) {
        position: relative;
      }
      .scrollbar-demo-item {
        display: inline-block;
        width: 100px;
        height: 100px;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        margin-top: 20px;
        margin-right: 20px;
        .img-name {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 20px;
          line-height: 20px;
          background: rgba(0, 0, 0, 0.5);
          text-align: center;
          padding: 0 10px;
          .img-name-label {
            font-size: 12px;
            color: #ffffff;
          }
        }
        &:nth-child(3n) {
          margin-right: 0;
        }
        &:nth-child(1) {
          width: 220px;
          height: 220px;
          margin-top: 0;
        }

        &:nth-child(2) {
          position: absolute;
          top: 0;
          right: 0;
          margin: 0;
        }
      }
    }
  }
}

.select-container-box {
  ::v-deep {
    aside {
      padding: 0;
      line-height: unset;
    }
  }
  margin-top: 20px;
  .collection-title {
    padding: 20px;
    padding-bottom: 0;
  }
  :deep(.el-tree) {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 94px;

    .el-tree-node__content {
      margin-bottom: 8px;
    }

    .el-icon.el-tree-node__expand-icon {
      padding-left: 10px;
    }

    .custom-tree-node {
      &-title {
        color: #131414;
        font-size: 14px;
      }
      &-num {
        color: #3d3d3d;
        font-size: 12px;
      }
    }

    .el-tree-node.is-current > .el-tree-node__content {
      background-color: #d9e8ff !important;
      color: #007dff !important;

      .custom-tree-node {
        &-title {
          color: #007dff;
        }
        &-num {
          color: #007dff;
        }
      }

      .custom-tree-node i {
        color: #007dff !important;
      }
    }
  }

  .tips {
    padding: 0 10px;
    line-height: 32px;
    height: 32px;
    background-color: #e0eaff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 10px 20px 10px;
    border-radius: 4px;

    span {
      display: inline-block;
      flex: 1;
    }

    i {
      width: 16px;
    }
  }

  .fix-wrap {
    position: absolute;
    top: 73px;
    bottom: 0px;
    background-color: white;
    border-radius: 0 0 0 10px;
    border-right: 1px solid #d8d8d8;
    overflow-y: hidden;

    & > div {
      height: 100% !important;
    }

    & > div > div:first-of-type {
      height: 100% !important;
    }
  }

  .fix-wrap + .el-main {
    margin-left: 260px;
  }

  .selection-container {
    //   height: calc(100% - 0px);
    //   overflow-y: auto;
    //   padding-top: 0;
    //   padding-bottom: 0;
    background-color: #fff;
    box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
    border-radius: 10px;

    .title {
      padding-left: 14px;
      position: relative;
      color: #131414;
      margin: 25px 0 16px 20px;
      display: flex;
      justify-content: space-between;

      &:before {
        position: absolute;
        content: "";
        left: 0;
        top: 8px;
        width: 6px;
        height: 6px;
        background-color: #409eff;
        border-radius: 50%;
      }
    }

    .content-top {
      padding: 0 20px;
      padding-top: 20px;
      background-color: #fff;
      .search-wrap {
        padding: 20px;
        background-color: #f6f8fa;
        margin: 0;
      }
    }

    .content-bottom {
      // margin-top: 20px;
      // margin: 0 -20px;

      .searchkey-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        background-color: white;
        border-bottom: 1px solid #d8d8d8;
        padding: 20px;
        border-radius: 5px 5px 0 0;
        z-index: 2;

        :deep(.searchkey-input) {
          .el-input__wrapper {
            border-radius: 16px;
            background: #f6f8fa;
          }
        }

        .left {
          display: flex;
          align-items: center;

          // & > div:first-of-type {
          //   width: 200px;
          //   height: 32px;
          //   line-height: 32px;
          //   background: #f6f8fa;
          //   box-shadow: inset 2px 3px 7px 0px rgba(3, 56, 129, 0.18);
          //   border-radius: 4px 4px 4px 4px;
          //   padding-left: 12px;
          // }
        }
      }

      :deep(.el-aside) {
        width: 260px;
        border-right: 1px solid #d8d8d8;
        background-color: #fff;

        & > div {
          position: relative;
        }

        & > div > div {
          height: calc(100vh - 330px - 135px);
          overflow-y: auto;
        }

        .submit-btn {
          position: fixed;
          height: 95px;
          bottom: 20px;
          width: 259px;
          background-color: white;
          border-radius: 0 0 0 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-top: 1px solid #dcdfe6;
        }
      }

      :deep(.el-main) {
        background-color: #f6f8fa;
        margin-bottom: 20px;

        .el-checkbox-group {
          width: 100%;
          // display: flex;
          // flex-wrap: wrap;
          display: grid;
          margin-bottom: 20px;
          grid-template-columns: repeat(var(--num), 1fr);
          // gap: 20px;
        }

        .el-checkbox {
          .el-checkbox__inner {
            border-radius: 50%;
            display: inline-block;
            width: 24px;
            height: 24px;

            &::before {
              text-align: center;
              left: 0px;
              top: 10px;
            }

            &::after {
              font-size: 24px;
              text-align: center;
              left: 8px;
              top: 5px;
              width: 5px;
            }
          }
        }

        .el-col-6 {
          max-width: none;
          display: flex;
          justify-content: center;
        }

        .shop-box {
          width: 294px;
          // padding: 0 10px;
          margin-right: 20px;
          margin-bottom: 20px;
          // margin: 0 10px;
          box-sizing: border-box;
          box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
          background-color: #fff;
          display: inline-block;
          border-radius: 10px;

          .top {
            width: 100%;
            height: 200px;
            box-shadow: 4px 0px 4px 0px rgba(4, 19, 74, 0.1);
            border-radius: 10px 10px 10px 10px;
            overflow: hidden;

            .img {
              width: 100%;
              height: 100%;
            }
          }

          .bottom {
            padding: 20px 16px 16px 16px;

            .header-title {
              font-family:
                Microsoft YaHei,
                Microsoft YaHei;
              font-weight: 700;
              min-height: 50px;
              font-size: 14px;
              color: #3d3d3d;
              margin-bottom: 12px;
              line-height: 24px;
              text-align: left;
              font-style: normal;
              text-transform: none;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              text-transform: none;
            }

            .header-price {
              font-family:
                Microsoft YaHei,
                Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              // margin-bottom: 10px;
              height: 34px;
              color: #4e5969;
              line-height: 18px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

            .choose-shop {
              font-family:
                Microsoft YaHei,
                Microsoft YaHei;
              font-weight: 400;
              margin-bottom: 10px;
              line-height: 24px;
              text-align: left;
              font-style: normal;
              text-transform: none;
              font-size: 12px;
              color: #86909c;
            }
          }
        }

        .pagination {
          display: flex;
          justify-content: flex-end;
          padding-bottom: 20px;
        }
      }
    }
  }

  :deep(.el-steps) {
    .el-step__icon-inner {
      margin-top: -3px;
    }

    .el-step {
      position: relative;
      flex-basis: 40% !important;
      &.is-flex,
      &:last-of-type.is-flex {
        flex-basis: 40% !important;
      }

      .el-step__head.is-success {
        border-color: transparent;

        .el-step__line {
          height: 0;
          background-color: transparent;
        }

        .el-step__icon.is-text {
          background-color: #007dff;
          color: white;
        }
      }

      .el-step__head.is-process {
        .el-step__icon.is-text {
          border: none;
          background-color: white;
          color: white;
          border: 1px solid rgba(0, 0, 0, 0.4);
        }
      }

      .el-step__head.is-wait {
        .el-step__icon.is-text {
          border: none;
          background-color: #f2f3f5;
          color: #4e5969;
        }
      }

      .el-step__title.is-wait {
        color: #4e5969;
      }

      .el-step__main {
        position: absolute;
        top: -8px;
        left: 40px;

        .el-step__title {
          font-weight: normal;

          &.is-success {
            color: #4e5969;
          }
        }
      }

      .el-step__line-inner {
        border: none;
      }

      .el-step__line {
        left: 160px;
        right: 25px;
        height: 0px;
        background-color: transparent;
        border-bottom: 1px dashed #d8d8d8;
      }
    }
  }
}

.foot-btn {
  position: fixed;
  width: calc(100% - 40px);
  padding: 14px 20px;
  right: 0;
  bottom: 0;
  height: 64px;
  background: #ffffff;
  box-shadow: 0px -5px 10px 0px rgba(66, 78, 102, 0.15);
  border-radius: 0px 0px 10px 0px;
  text-align: right;
  z-index: 2;
  .btn {
    width: 120px;
    height: 100%;
  }
}
</style>
